<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>物资领用申请查看</title>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/vue.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/mycommon.js"></script>


		<style>
			.el-table .warning0-row {
				background: #ffb3b3;
			}

			.el-table .warning1-row {
				background: #f0f9eb;
			}

			.el-table .warning2-row {
				background: #ffe5b3;
			}

			.page {
				position: fixed;
				bottom: 0;
				height: 25%;
				width: 97%;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<header></header>
		<div>
			<section id="app">
				<fieldset style="border: 1px solid gainsboro;margin-bottom: 4px;">
					<legend><i class="el-icon-search" style="color:#bfb6a3 ;">查询</i></legend>
					<el-form size="small" :inline="true">
						<el-form-item label="物资名称">
							<el-input v-model="materialname" placeholder="请输入物资"></el-input>
						</el-form-item>
						<el-form-item label="物资编码">
							<el-input v-model="codematerial" placeholder="请输入编码"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="indexes">查 询</el-button>
						</el-form-item>
					</el-form>
				</fieldset>
				<!-- 表格 -->
				<el-table size="big" :data="list" style="width: 100%" :row-class-name="tableRowClassName">
					<el-table-column align="center" prop="codematerial" label="物资编码" min-width="21%">
					</el-table-column>
					<el-table-column align="center" prop="materialname" label="物资" min-width="17%">
					</el-table-column>
					<el-table-column align="center" prop="content" label="数量" min-width="8%">
					</el-table-column>
					<el-table-column align="center" prop="applicants" label="申请人" min-width="7%">
					</el-table-column>
					<el-table-column align="center" prop="applicationtime" :formatter="formatDate" label="申请时间"
						min-width="15%">
					</el-table-column>
					<el-table-column align="center" prop="reviewers" label="审核人" min-width="8%">
					</el-table-column>
					<el-table-column align="center" prop="state" label="状态" min-width="10%">
					</el-table-column>
				</el-table>
				<!--查看入库申请详情-->
				<!-- 分页 -->
				<div class="page">
					<el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
						@current-change="change">
					</el-pagination>
				</div>
			</section>
		</div>

		<footer></footer>
		<script>
			new Vue({
				el: '#app',
				data: {
					list: [],
					page: 1, //当前页
					pageSize: 5, //分页大小
					total: 0, //查询的总数
					dialogVisible: false, //订单详情表单显示与否
					materialname: '',
					codematerial: '',
					status: ''
				},
				methods: {
					//查询订单
					indexes() {
						var that = this;
						//ajax请求
						axios.post(HTTP + "der/selectDerAll/" + this.page).then(function(res) {
							//alert(JSON.stringify(res))
							that.total = res.data.data.derPageInfo.total
							that.list = res.data.data.derPageInfo.list
						}).catch(err => {
							console.log(err)
						});
					},
					tableRowClassName({
						row,
						rowIndex
					}) {
						if (row.status === 1) {
							return 'warning1-row';
						} else if (row.status === 2) {
							return 'warning2-row';
						} else if (row.status === 0) {
							return 'warning0-row';
						}
						return '';
					},
					//查询具体信息
					handleEdit(index, row) {
						var that = this
						axios.post(HTTP + "der/selectOneDer", {
							id: row.id,
							batchid: row.batchid
						}).then(function(res) {
							that.one = res.data.data.one
							that.dialogVisible = true
							//alert(JSON.stringify(res))
						}).catch(err => {
							console.log(err)
						});
					},
					//提交订单审核结果
					upMaterialstor() {
						var that = this
						axios.post(HTTP + "der/upDer", {
							map: this.one,
							status: this.status
						}).then(function(res) {
							that.dialogVisible = false
							//alert(JSON.stringify(res))
							that.$message(res.data.message)
							that.indexes()
						}).catch(err => {
							console.log(err)
						});
					},
					//改变页码
					change(val) {
						this.page = val
						this.indexes()
					},
					//格式化时间
					formatDate(row, column) {
						// 获取单元格数据
						let data = row[column.property]
						if (data == null) {
							return ''
						}
						return datetimeFormat(data)
					},
					format(value) {
						return datetimeFormat(value[0].applicationtime)
					}
				},
				//初始化
				mounted() {
					this.indexes()
				}
			})
		</script>
	</body>
</html>